import React, { Component } from 'react'
import { flushSync } from 'react-dom'; // 引入 flushSync
/**
 * flushSync 是 React 提供的一个函数，用于强制同步执行 setState 操作。
 * 但在代码中没有引入 flushSync，导致 ESLint 报错 'flushSync' is not defined。
 */

export default class App extends Component {
    state = {
        count: 1
    }
    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={() => this.addClick()}>add1</button>
                <button onClick={() => this.addClick2()}>add2</button>
            </div>
        )
    }
    addClick() {
        // 多个setState会合并执行，不会覆盖之前的(多个setState会在React底层转换为一个，提高效率)
        // count 还没有更新就执行了
        this.setState({
            count: this.state.count + 1
        })

        console.log('====================================');
        console.log(this.state.count);
        console.log('====================================');

        this.setState({
            count: this.state.count + 1
        })

        console.log('====================================');
        console.log(this.state.count);
        console.log('====================================');

        this.setState({
            count: this.state.count + 1
        })

        console.log('====================================');
        console.log(this.state.count);
        console.log('====================================');
    }


    // setState 是宏任务

    addClick2() {
        // flushSync 是 React 提供的一个函数，用于强制同步执行 setState 操作。
        flushSync(() => {

            this.setState({
                count: this.state.count + 1
            })
            console.log('====================================');
            console.log(this.state.count);

        });

        flushSync(() => {

            this.setState({
                count: this.state.count + 1
            })
            console.log('====================================');
            console.log(this.state.count);

        });

        flushSync(() => {

            this.setState({
                count: this.state.count + 1
            })
            console.log('====================================');
            console.log(this.state.count);

        });
    }

    /**
     * setState处在同步的逻辑中，异步更新状态，异步更新真实的dom
     * setState处在同步的逻辑中，同步更新状态，同步更新真实的dom
     */

    /*
     * 结论
     * setState 异步更新状态，异步更新真实dom
     * vue 同步更新状态，异步更新真实dom
     * Vue 的状态更新和 DOM 更新机制
     *  实际上，Vue 并不是同步更新状态和真实 DOM。以下是详细的解释：

        1. 状态更新机制
            异步更新：当 Vue 组件的状态（即 data 或 Vuex 中的状态）发生变化时，
                    Vue 并不会立即更新 DOM。
                    相反，它会将状态变化放入一个队列中，并在下一个“nextTick”时批量处理这些更新。
            nextTick：Vue 使用 nextTick 来确保在状态更新后，在 DOM 更新之前执行某些操作。
                        nextTick 是一个非常有用的工具，可以在状态更新后等待 DOM 更新完成。
        2. DOM 更新机制
                批量更新：为了提高性能，Vue 会将多个状态更新合并成一次 DOM 更新。
                这意味着即使你在短时间内多次修改状态，Vue 也只会触发一次 DOM 更新。
            虚拟 DOM：Vue 使用虚拟 DOM 来优化 DOM 操作。
                    虚拟 DOM 是一个轻量级的 JavaScript 对象树，它与真实的 DOM 树相对应。
                    Vue 通过比较虚拟 DOM 和真实 DOM 的差异，只更新必要的部分，从而减少不必要的 DOM 操作。
     */
}
